<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-form ref="queryForm" :model="queryForm" label-width="80px" class="bg-white pd-12px">
                <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="6">
                        <el-form-item label="年级:">
                            <el-select v-model="queryForm.grade">
                                <el-option
                                    v-for="item in options.grade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="培养层次:">
                            <el-select v-model="queryForm.trainingLevel">
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item class="float-right">
                            <el-button @click="reset">{{ $t('message.reset') }}</el-button>
                            <el-button type="primary" @click="onSubmit">{{ $t('message.filter') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">注册权限管理</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="12">
                    <div class="empty-box"></div>
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button plain @click="deleteItems">{{ $t('message.delete') }}</el-button>
                        <el-button type="primary" @click="showAddDialog">{{ $t('message.add') }}</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-table :data="reportAuths" size="mini" @selection-change="handlerSelectionChange">
                <el-table-column type="selection" width="55" stripe/>
                <el-table-column label="学期" width="100">
                    <template slot-scope="scope">{{ scope.row.grade }}</template>
                </el-table-column>
                <el-table-column label="入学时间">
                    <template slot-scope="scope">{{ scope.row }}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column label="开始时间">
                    <template slot-scope="scope">{{ scope.row.start }}</template>
                </el-table-column>
                <el-table-column label="结束时间">
                    <template slot-scope="scope">{{ scope.row.end }}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="text" @click="deleteItem(scope.row)" size="mini">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                :title.sync="dialogConfig.dialogTitle"
                :visible.sync="dialogConfig.showDialog"
                :before-close="handleClose"
                top="5vh"
                width="40%"
            >
                <el-form
                    :model="dialogConfig.form"
                    :inline="true"
                    :rules="dialogConfig.rules"
                    ref="addItemForm"
                >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="年级:" :label-width="formLabelWidth" prop="grade">
                                <el-select v-model="dialogConfig.form.grade">
                                    <el-option
                                        v-for="item in options.grade"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="培养层次:"
                                :label-width="formLabelWidth"
                                prop="trainingLevel"
                            >
                                <el-select v-model="dialogConfig.form.trainingLevel">
                                    <el-option
                                        v-for="item in options.trainingLevel"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开始时间:" :label-width="formLabelWidth" prop="start">
                                <el-date-picker v-model="dialogConfig.form.start" type="month"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间:" :label-width="formLabelWidth" prop="end">
                                <el-date-picker v-model="dialogConfig.form.end" type="month"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogConfig.showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="submitData">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
        <!--删除操作-->
        <delete-dialog
            :modal-title="deleteDialogConfig.dialogTitle"
            title="确认删除以下信息"
            :show-dialog="deleteDialogConfig.showDialog"
            :data="deleteDialogConfig.reportAuths"
            :columns="deleteDialogConfig.columns"
            :ok-call-back="handlerDeleteItems"
            :handle-close="handlerDeleteDialogClose"
        />
    </div>
</template>
<script>
import * as API from "common/src/api/reportAuthMange";
import { queryDic } from "common/src/api/dictionary";
import deleteDialog from "common/src/views/administrator/studentStatusManage/DeleteItems";
export default {
    components: { deleteDialog },
    data() {
        const getGrade = (function() {
            const now = new Date().getFullYear();
            const years = [];
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                });
            }
            return years;
        })();
        return {
            reportAuths: [],
            selectedItems: [],
            queryForm: {
                grade: "",
                trainingLevel: ""
            },
            options: {
                grade: getGrade,
                trainingLevel: []
            },
            dialogConfig: {
                dialogTitle: "",
                showDialog: false,
                form: {
                    grade: "",
                    trainingLevel: "",
                    start: "",
                    end: ""
                },

                rules: {
                    grade: [
                        {
                            required: true,
                            message: "请选择年级",
                            trigger: "blur"
                        }
                    ],
                    trainingLevel: [
                        {
                            required: true,
                            message: "请选择培养层次",
                            trigger: "blur"
                        }
                    ],
                    start: [
                        {
                            required: true,
                            message: "请选择开始时间",
                            trigger: "blur"
                        }
                    ],
                    end: [
                        {
                            required: true,
                            message: "请选择结束时间",
                            trigger: "blur"
                        }
                    ]
                }
            },
            deleteDialogConfig: {
                dialogTitle: "删除",
                showDialog: false,
                reportAuths: [],
                columns: [
                    { label: "年级", key: "grade" },
                    { label: "入学时间", key: "" },
                    { label: "培养层次", key: "trainingLevelI18n" },
                    { label: "开始时间", key: "start" },
                    { label: "结束时间", key: "end" }
                ]
            }
        };
    },
    mounted() {
        this.initOptions();
        this.onSubmit();
    },
    methods: {
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                }
            });
        },
        fillSelect(data) {
            this._fill("trainingLevel", data.X_PYCC);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        onSubmit() {
            API.getReportAuthList(this.queryForm).then(res => {
                let { code, data } = res;
                if (code === 200) {
                    this.reportAuths = data;
                }
            });
        },
        reset() {
            this.queryForm = {
                grade: "",
                trainingLevel: ""
            };
            this.onSubmit();
        },
        indexMethod(value) {
            return value + 1;
        },
        editItem(row) {
            let { grade, trainingLevel, id, start, end } = row;
            this.dialogConfig.form = { grade, trainingLevel, id, start, end };
            this.dialogConfig.showDialog = true;
        },
        deleteItem(row) {
            this.deleteDialogConfig.reportAuths = [row];
            this.deleteDialogConfig.showDialog = true;
        },
        submitData() {
            //验证
            this.$refs["addItemForm"].validate(valid => {
                if (valid) {
                    if (this.dialogConfig.form.id) {
                        // 走更新的接口
                        API.editReportAuth(this.dialogConfig.form).then(res => {
                            if (res.code === 200) {
                                this.$messge({
                                    message: "修改成功",
                                    type: "success"
                                });
                                this.onSubmit();
                            }
                        });
                    } else {
                        // 走添加的接口
                        // 走更新的接口
                        API.addReportAuth(this.dialogConfig.form).then(res => {
                            if (res.code === 200) {
                                this.$messge({
                                    message: "添加成功",
                                    type: "success"
                                });
                                this.onSubmit();
                            }
                        });
                    }
                }
            });
        },
        showDeleteDialog() {},
        showAddDialog() {
            this.dialogConfig.form = {
                grade: "",
                trainingLevel: "",
                start: "",
                end: ""
            };
            this.dialogConfig.dialogTitle = "新增报到权限";
            this.dialogConfig.showDialog = true;
        },
        // 删除选中的项目
        deleteItems() {
            let { selectedItems } = this;
            if (selectedItems.length === 0) {
                return this.$message({
                    message: "请选中至少一条数据",
                    type: "error"
                });
            }
            this.deleteDialogConfig.reportAuths = selectedItems;
            this.deleteDialogConfig.showDialog = true;
        },
        deleteItem(row) {
            this.deleteDialogConfig.students = [row];
            this.deleteDialogConfig.showDialog = true;
        },
        handlerDeleteDialogClose() {
            this.deleteDialogConfig.showDialog = false;
        },
        handlerDeleteItems() {
            let params = this.deleteDialogConfig.reportAuths.map(
                item => item.id
            );
            API.deleteReportAuth(params)
                .then(
                    response => {
                        if (response.code === 200) {
                            this.$message({
                                message: "删除成功！",
                                type: "success"
                            });
                            this.onSubmit();
                        }
                    },
                    xhr => {}
                )
                .finally(() => {
                    this.deleteDialogConfig.showDialog = false;
                });
        },
        handlerSelectionChange(val) {
            this.selectedItems = val;
        }
    }
};
</script>
<style>
</style>

